<template>
	<view class="page">
		<headerinfo></headerinfo>
		<u-navbar title="更换背景图" :placeholder="true" :autoBack="true"></u-navbar>
		<view class="changeMy">
			<view class="imglist">
				<image @click="check(item)" v-for="(item,index) in list" :key="index" :src="item" mode="aspectFill">
				</image>
			</view>
		</view>
		<w-compress ref='wCompress' />

	</view>
</template>

<script>
	import minxins from '../../../common/upload.js';
	import WCompress from '@/components/w-compress/w-compress.vue'
	export default {
		mixins: [minxins],
		components: {
			WCompress
		},
		data() {
			return {
				inv: -1,
				list: ['https://www.25175.net/images/mybg.jpg', 'https://www.25175.net/images/mybg1.jpg',
					'https://www.25175.net/images/mybg2.jpg', 'https://www.25175.net/images/mybg3.jpg',
					'https://www.25175.net/images/mybg4.jpg','https://www.25175.net/images/mybg5.jpg'
				],

				form: {

				}
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			check(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/tabbar/mine/mybgyulan?url=${item}`
				})
			},
			chooseImg() {
				uni.chooseImage({
					count: 1,
					success: res => {

						this.$refs.wCompress.start(res.tempFilePaths).then(res2 => {
							res2.forEach((item, index) => {
								var fileName = Date.now() + '_' + Math.round(Math.random() *
									100000000) + '.' + item.substring(item.lastIndexOf(
									'.') + 1)

								var maxImageMegBytes = uni.getStorageSync('maxImageMegBytes') ?
									uni.getStorageSync('maxImageMegBytes') : 20

								var resSize = res.tempFiles[index].size;
								if (resSize > maxImageMegBytes * 1024 * 1024) {
									uni.showToast({
										title: `大小不能超过${maxImageMegBytes}MB`,
										icon: 'none'
									});
									return
								}

								var familyId = uni.getStorageSync('familyId') ? uni
									.getStorageSync('familyId')[0] : ''



								this.uploadUserImage(item, 'image', fileName, '', (
									avatarUrl) => {
										this.$api.changeAvatar({
											avatarUrl
										}).then(res => {
											this.$Show.show('修改成功')
											this.getData()
										})
									})
							})
						})

					}
				})
			},
			getData() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$api.myInfo().then(res => {
					this.form = res
					uni.hideLoading()
				})
			},
		}
	};
</script>


<style lang="scss" scoped>
	.page {
		background-color: #fff;
	}

	.changeMy {
		border-top: 1px solid #f8f8f8;

		.imglist {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 20rpx;

			image {
				width: 32%;
				height: 200rpx;
				border-radius: 10rpx;
				margin-top: 20rpx;
				margin-right: 1.3%;
				border: 2px solid #fff;
			}

			.active {
				border-color: red;
			}

		}
	}
</style>